<template>
  <div :class="boxClass">
    <vxe-toolbar ref="xToolbarRef" custom>
      <!-- 工具按钮 -->
      <template #buttons>
        <div :class="`${prefixCls}-button div`" :size="btnSize">
          <slot v-if="showPrefix" name="toolbarPrefix" :size="btnSize"/>
          <a-button
              v-if="showAdd"
              type="primary"
              preIcon="ant-design:plus-outlined"
              :disabled="disabled"
              @click="trigger('add')">
            <span>新增</span>
          </a-button>
          <a-button
              v-if="showSave"
              preIcon="ant-design:save-outlined"
              :disabled="disabled"
              @click="trigger('save')">
            <span>保存</span>
          </a-button>
          <template v-if="selectedRowIds.length > 0">
            <Popconfirm
                v-if="showRemove"
                :title="`确定要删除这 ${selectedRowIds.length} 项吗?`"
                @confirm="trigger('remove')"
            >
              <a-button preIcon="ant-design:minus-outlined" :disabled="disabled">删除</a-button>
            </Popconfirm>
            <template v-if="showClearSelection">
              <a-button preIcon="ant-design:delete-outlined" @click="trigger('clearSelection')">清空选择</a-button>
            </template>
          </template>
          <slot v-if="showSuffix" name="toolbarSuffix" :size="btnSize"/>
          <a v-if="showCollapse" style="margin-left: 4px" @click="toggleCollapse">
            <span>{{ collapsed ? '展开' : '收起' }}</span>
            <Icon :icon="collapsed ? 'ant-design:down-outlined' : 'ant-design:up-outlined'"/>
          </a>
        </div>
      </template>
    </vxe-toolbar>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject, ref, onMounted } from 'vue'
// noinspection ES6UnusedImports
import { Popconfirm } from 'ant-design-vue'
import { VxeToolbarInstance } from 'vxe-table'
import { Icon } from '/@/components/Icon'
import { propTypes } from '/@/utils/propTypes'

const props = defineProps({
  size: propTypes.string,
  disabled: propTypes.bool.def(false),
  toolbarConfig: propTypes.object,
  disabledRows: propTypes.object,
  hasBtnAuth: propTypes.func,
  selectedRowIds: propTypes.array.def(() => []),
})
const emit = defineEmits(['save', 'add', 'remove', 'clearSelection', 'register'])
const xToolbarRef = ref({} as VxeToolbarInstance)
const prefixCls = `${inject('prefixCls')}-toolbar`
const boxClass = computed(() => [
  prefixCls,
  {
    [`${prefixCls}-collapsed`]: collapsed.value,
  },
])
// 是否收起
const collapsed = ref(true)
// 配置的按钮
const btns = computed(() => {
  let btns = props.toolbarConfig?.btn || ['add', 'remove', 'clearSelection']
  // 排除掉没有授权的按钮
  return btns.filter(btn => {
    // 系统默认的批量删除编码配置为 batch_delete 此处需要兼容一下
    if (btn === 'remove') {
      return hasBtnAuth(btn) || hasBtnAuth('batch_delete')
    }
    return hasBtnAuth(btn)
  })
})
const showAdd = computed(() => btns.value.includes('add'))
const showSave = computed(() => btns.value.includes('save'))
const showRemove = computed(() => btns.value.includes('remove'))
// 配置的插槽
const slots = computed(() => props.toolbarConfig?.slot || ['prefix', 'suffix'])
const showPrefix = computed(() => slots.value.includes('prefix'))
const showSuffix = computed(() => slots.value.includes('suffix'))
// 是否显示清除选择按钮
const showClearSelection = computed(() => {
  if (btns.value.includes('clearSelection')) {
    // 有禁用行时才显示清空选择按钮
    // 因为禁用行会阻止选择行，导致无法取消全选
    // return Object.keys(props.disabledRows).length > 0
  }
  return false
})
// 是否显示展开收起按钮
const showCollapse = computed(() => btns.value.includes('collapse'))
// 按钮 size
const btnSize = computed(() => props.size === 'tiny' ? 'small' : null)

onMounted(() => {
  // 注册 vxe-toolbar
  emit('register', {
    xToolbarRef,
  })
})

// 判断按钮是否已授权
function hasBtnAuth(key: string) {
  return props.hasBtnAuth ? props.hasBtnAuth(key) : true
}

/** 触发事件 */
function trigger(name) {
  emit(name)
}

// 切换展开收起
function toggleCollapse() {
  collapsed.value = !collapsed.value
}

</script>